<script setup>
import {
  registerUserAsync
} from '@/api/user'

const emit = defineEmits(['register'])

const optionList = ref([
  {
    data: {
      label: '账号',
      prop: 'userName',
    },
    component: 'el-input',
    $attrs: {
      placeholder: '请输入用户账号'
    }

  },
  {
    data: {
      label: '密码',
      prop: 'password',
    },
    component: 'el-input',
    $attrs: {
      placeholder: `请输入用户密码`,
      type: 'password',
      'show-password': true
    }
  },
  {
    data: {
      label: '确认密码',
      prop: 'password2',
    },
    component: 'el-input',
    $attrs: {
      placeholder: `请输入再次输入用户密码`,
      type: 'password',
      'show-password': true
    }
  },
  {
    data: {
      label: '昵称',
      prop: 'nickName',
    },
    component: 'el-input',
    $attrs: {
      placeholder: `请输入用户昵称`
    }
  },
  {
    data: {
      label: '手机号码',
      prop: 'mobile',
    },
    component: 'verificationCode',
    $attrs: {
      placeholder: '请输入能够获取验证码的手机号码',
      type: 2

    }
  },
  {
    data: {
      label: '验证码',
      prop: 'yzm'
    },
    component: 'el-input',
    $attrs: {
      placeholder: '请输入验证码'
    }
  },

])


//表单校验规则
const optionRuleList = ref({
  userName: [
    {
      required: true,
      validator: (rule, value, callback) => {
        if (!value) return callback(new Error('请输入用户账号！'))
        const reg = /^(?=.{2,16})((?=.*\d)| (?=.*[A-Za-z])).*$/
        if (!reg.test(value)) {
          callback(new Error('账号长度在2-16位且包含字母或数字!'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  password: [
    {
      required: true,
      validator: (rule, value, callback) => {
        if (!value) return callback(new Error('请输入用户密码！'))
        const reg = /^(?=.{6,16})(?=.*\d)(?=.*[A-Za-z]).*$/
        if (!reg.test(value)) {
          callback(new Error('密码长度在6-16位且包含字母和数字!'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  password2: [
    {
      required: true,
      validator: (rule, value, callback) => {
        if (!formData.value.password) return callback(new Error('请先输入用户密码！'))
        if (!value) return callback(new Error('请再次输入用户密码！'))
        if (value !== formData.value.password) {
          callback(new Error('两次密码不一致！请重新输入'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  nickName: [{ required: true, message: '请输入用户昵称', trigger: 'blur' }],
  mobile: [
    {
      required: true,
      message: '请输入电话号码！',
      trigger: 'blur'
    }
  ],
  yzm: [
    {
      required: true, message: '验证码不能为空！', trigger: 'blur'
    }
  ],

})

const formRef = ref(null)
const formData = ref({})

const updateFormData = (data) => {
  formData.value = data
}

//重置
const handleReset = () => {
  formRef.value.resetForm()
}

//保存/更新
const handleUpdate = () => {
  formRef.value.validForm(registerUserInfo)
}


const registerUserInfo = async () => {
  try {
    console.log('%c [  ]-41', 'font-size:13px; background:pink; color:#bf2c9f;', formData.value)
    const params = {
      ...formData.value,
      accountState: 0
    }
    const res = await registerUserAsync(params)
    if (res && res.code + '' === '200') {
      ElMessage.success('注册成功！赶紧登录吧！')
      emit('register')
    } else if (res && res.code + '' !== '200') {
      ElMessage.error(res.msg)
    }

  } catch (error) {
    console.log('%c [ error ]-42', 'font-size:13px; background:pink; color:#bf2c9f;', error)
  }

}

</script>


<template>
  <h4>注册界面</h4>

  <commonForm ref="formRef" :optionList="optionList" :optionRuleList="optionRuleList" @updateFormData="updateFormData">
  </commonForm>
  <div class="dialog-footer">
    <el-button class="btn-blue" type="primary" @click="handleReset">
      重置
    </el-button>
    <el-button class="btn-green" type="primary" @click="handleUpdate">
      确认注册
    </el-button>
  </div>

</template>


<style lang="scss" scoped>
h4 {
  margin-bottom: 20px;
  -webkit-text-stroke: 1px rgb(215, 215, 215);
  -moz-text-stroke: 1px rgb(215, 215, 215);
  -o-text-stroke: 1px rgb(215, 215, 215);
  font-size: 36px;
  font-style: italic;
  letter-spacing: 5px;
}

:deep(.el-button) {
  color: #fff;
  width: 150px;
  height: 40px;
  font-size: 16px;
  border-color: #c6c6c6;
}
</style>